<template lang="pug">
  el-tabs(type='border-card' v-model='activeTabName')
    el-tab-pane(label='用户管理' name='user')
      UserPane(ref='userPane')
    el-tab-pane(label='角色管理' name='role')
      RolePane(ref='rolePane')
    el-tab-pane(label='权限管理' name='permission')
      PermissionPane(ref='permissionPane')
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import UserPane from "./components/auth/UserPane.vue";
import RolePane from "./components/auth/RolePane.vue";
import PermissionPane from "./components/auth/PermissionPane..vue";



@Component({
  components: {
    UserPane,
    RolePane,
    PermissionPane
  }
})
export default class Auth extends Vue {
  public activeTabName: string = "";

  public mounted() {
    this.activeTabName = "user";
  }

  @Watch("activeTabName")
  onActiveTabName(newValue: string) {
     setTimeout(() => {
      (this.$refs[newValue + "Pane"] as Vue).$emit("update");
    }, 50);

  }
}
</script>

